<template>
  <div class="connect">
    <div class="connect_box">
      <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label="$t('Order_module.user_account')">
          <el-input v-model="formInline.user" :placeholder="$t('Order_module.user_account')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('Order_module.name')">
          <el-input v-model="formInline.user" :placeholder="$t('Order_module.name')"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" >{{$t('public.query')}}</el-button>
        </el-form-item>
      </el-form> -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item :label="$t('Order_module.name')">
          <el-input v-model="select.userName" :placeholder="$t('Order_module.name')"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('public.status')">
          <el-select v-model="select.status" :placeholder="$t('public.status')">
              <el-option
                v-for="item in selectstatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="formselect()" >{{$t('public.query')}}</el-button>
        </el-form-item>
      </el-form>
      <div class="btns_ayyay">
        <!-- <el-button @click="payShow" type="primary">{{$t('index.Recharge')}}</el-button>
        <span style="margin-right: 15px;margin-left: 15px;">
          {{$t('Order_module.Allocated_total_order_quantity')}}:898989
        </span> -->
        <!-- <el-button type="text" >{{$t('Order_module.View_flow_details')}}</el-button> -->
      </div>
        <el-table :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55"> </el-table-column>
          <el-table-column align="center" prop="userAccount" :label="$t('Order_module.user_account')"  min-width="180"> </el-table-column>
          <el-table-column align="center" prop="userName" :label="$t('Order_module.corporate_name')"  min-width="180">
            <template slot-scope="{row}">
                <p>{{row.userName}}</p>
                <p>{{row.koreanName}}</p>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="Order_No" :label="$t('Order_module.customer_type')"  min-width="180"> </el-table-column> -->
          <el-table-column align="center" prop="balance" :label="$t('public.Account_balance')"  min-width="180">
            <template slot-scope="{row}">
                <p>{{row.balance?row.balance:'-'}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="residueBalance" :label="$t('public.available_balance')"  min-width="180">
            <template slot-scope="{row}">
                <p>{{row.residueBalance?row.residueBalance:'-'}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="Order_No" :label="$t('Order_module.Number_and_quantity_of_orders')"  min-width="180">
            <template slot-scope="{row}">
                <p>{{row.oddNumbers?row.oddNumbers:'-'}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="Order_No" :label="$t('Order_module.residueOddNumbers')"  min-width="180">
            <template slot-scope="{row}">
                <p>{{row.residueOddNumbers?row.residueOddNumbers:'-'}}</p>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="Order_No" :label="$t('public.operate')"  min-width="180">
            <template slot-scope="{row}">
              <!-- 撤回 -->
              <el-button  @click="ctrlc(row)" type="text" size="small">{{$t('public.withdraw')}}</el-button>
              <!-- 转移 -->
              <el-button @click="transferClose(row)" type="text" size="small">{{$t('public.transfer')}}</el-button>
              <!-- 充值 -->
              <el-button @click="payShow(row)" type="text">{{$t('index.Recharge')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;"></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 50, 200, 400]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
    <!--  充值金额   -->
    <el-dialog
      :title="$t('UserInfo.Allocate_single_quantity')"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="payShow">
      <el-form :model="payForm" v-if="dialogVisible" :rules="rules" ref="payForm" label-width="120px" class="demo-ruleForm">
        <el-form-item :label="$t('public.Recharge_type')">
          <!-- :disabled="(user.id==1)?false:true " -->
          <el-select  disabled style="width: 100%;" v-model="payForm.rechargeType" :placeholder="$t('public.Recharge_type')">
              <el-option
                v-for="item in RechargeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item  v-if="onclickOBJ.rechargeType==1"   prop="rechargeAmount"  :label="$t('Order_module.Recharge_amount')">
          <!-- 充值金额 -->
          <el-input type="number" @input="(e)=>{payForm.rechargeAmount = $geShi(e)}" :maxlength="11" v-model="payForm.rechargeAmount" :placeholder="$t('Order_module.Recharge_amount')"></el-input>
        </el-form-item>
        <el-form-item  v-if="onclickOBJ.rechargeType==0"   prop="rechargeOrderNum"  :label="$t('Order_module.Allocate_single_quantity')">
        <!-- 充值单量 -->
          <el-input type="text" @input="(e)=>{payForm.rechargeOrderNum = e.replace(/[^0-9]/g,'')}" show-word-limit :maxlength="9" v-model="payForm.rechargeOrderNum" :placeholder="$t('Order_module.Allocate_single_quantity')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.notes')">
          <el-input type="textarea" maxlength="200" show-word-limit  v-model="payForm.remark" :placeholder="$t('public.notes')"></el-input>
        </el-form-item>
          <el-button @click="dialogVisible = false">{{$t('public.cancellation')}}</el-button>
          <el-button type="primary" :loading="payLoading" @click="pay()">{{$t('public.determine')}}</el-button>
      </el-form>

    </el-dialog>
    <!-- 转移对话框 -->
    <el-dialog
      :title="$t('public.Transfer_order_quantity')"
      :visible.sync="transferShow"
      width="40%"
      :before-close="transferClose">
      <el-form v-if="transferShow" :model="transferInfo" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
          <el-form-item  :label="$t('public.Source_account')">
          <!-- 来源用户账号 -->
            <el-input type="number" disabled :maxlength="11" v-model="transferInfo.userAccount" :placeholder="$t('public.Source_account')"></el-input>
          </el-form-item>
          <el-form-item prop="user_account"  :label="$t('Order_module.user_account')">
          <!-- 用户账号 -->
            <!-- <el-input v-model="transferInfo.user_account" :placeholder="$t('Order_module.user_account')"></el-input> -->
            <el-select   style="width: 100%;" v-model="transferInfo.user_account" :placeholder="$t('Order_module.user_account')">
                <el-option
                  v-for="item in selectUserList"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item v-if="onclickOBJ.rechargeType==0"  :label="$t('Order_module.Transferable_quantity')">
          <!-- 可转移单量 -->
            <el-input type="number" disabled  :maxlength="11" v-model="transferInfo.residueOddNumbers" :placeholder="$t('Order_module.Transferable_quantity')"></el-input>
          </el-form-item>
          <el-form-item v-if="onclickOBJ.rechargeType==0"   prop="numbers"   :label="$t('public.Transfer_order_quantity')">
          <!-- 转移单量 -->
            <el-input  v-model="transferInfo.numbers" type="number" :maxlength="11" :placeholder="$t('public.Transfer_order_quantity')"></el-input>
          </el-form-item>
          <el-form-item v-if="onclickOBJ.rechargeType==1" :label="$t('public.Transferable_amount')">
          <!-- 可转移金额 -->
            <el-input type="number" disabled  :maxlength="11" v-model="transferInfo.residueBalance" :placeholder="$t('public.Transferable_amount')"></el-input>
          </el-form-item>
          <el-form-item v-if="onclickOBJ.rechargeType==1" prop="number" :label="$t('public.Transfer_amount')">
          <!-- 转移金额 -->
            <el-input  type="number"  @input="(e)=>{transferInfo.number = $geShi(e)}" v-model="transferInfo.number" :maxlength="11" :placeholder="$t('public.Transfer_amount')"></el-input>
          </el-form-item>
          <div style="display: flex; justify-content: flex-end;">
            <el-button @click="transferShow = false">{{$t('public.cancellation')}}</el-button>
            <el-button type="primary" :loading="transferLoading" @click="transfersubmit">{{$t('public.determine')}}</el-button>
          </div>

      </el-form>

    </el-dialog>
    <!-- 撤回对话框 -->
    <el-dialog
      :title="$t('public.Withdrawal_order_quantity')"
      :visible.sync="ctrlShow"
      width="40%"
      :before-close="ctrlClose">
      <el-form v-if="ctrlShow" :model="ctrlInfo" :rules="rules3" ref="ruleForm3" label-width="120px" class="demo-ruleForm">
          <el-form-item  :label="$t('public.Source_account')">
          <!-- 来源用户账号 -->
            <el-input type="number" disabled :maxlength="11" v-model="ctrlInfo.userAccount" :placeholder="$t('public.Source_account')"></el-input>
          </el-form-item>
          <el-form-item v-if="onclickOBJ.rechargeType==0"  :label="$t('public.Revocable_quantity')">
          <!-- 可撤回单量 -->
            <el-input type="number" disabled  :maxlength="11" v-model="ctrlInfo.residueOddNumbers" :placeholder="$t('public.Revocable_quantity')"></el-input>
          </el-form-item>
          <el-form-item v-if="onclickOBJ.rechargeType==0"  prop="numbers"   :label="$t('public.Withdrawal_order_quantity')">
          <!-- 撤回单量 -->
            <el-input  v-model="ctrlInfo.numbers" type="number" :maxlength="11" :placeholder="$t('public.Withdrawal_order_quantity')"></el-input>
          </el-form-item>
          <el-form-item v-if="onclickOBJ.rechargeType==1" :label="$t('public.Revocable_amount')">
          <!-- 可撤回金额 -->
            <el-input type="number" disabled  :maxlength="11" v-model="ctrlInfo.residueBalance" :placeholder="$t('public.Revocable_amount')"></el-input>
          </el-form-item>
          <el-form-item v-if="onclickOBJ.rechargeType==1" prop="number"   :label="$t('public.Withdrawal_amounts')">
          <!-- 撤回金额 -->
            <el-input  type="number" v-model="ctrlInfo.number" :maxlength="11" :placeholder="$t('public.Withdrawal_amounts')"></el-input>
          </el-form-item>
          <div style="display: flex; justify-content: flex-end;">
            <el-button @click="ctrlShow = false">{{$t('public.cancellation')}}</el-button>
            <el-button @click="submitdan('ruleForm3')" :loading="danLoading" type="primary">{{$t('public.determine')}}</el-button>
          </div>

      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  import {
    user_recharge,
    user_list,
    user_selectUser,
    user_transfer,
    user_revoke
  } from '@/api/wqzApi'
  import store from '@/store'
  export default {
    components: {},
    data() {

       var validatePass = (rule, value, callback) => {
            if (!value) {
              callback(new Error(this.$t('public.Enter')));
            } else {
              console.log(this.transferInfo.residueBalance)
              callback();
              // if(value>this.transferInfo.residueBalance){
              //   callback(new Error(this.$t('public.net_transfer_of_resources')));
              // }else{

              // }

            }

          };
        var validatePass2 = (rule, value, callback) => {
             if (!value) {
               callback(new Error(this.$t('public.Enter')));
             } else {
               callback();
               // if(value>this.transferInfo.residueOddNumbers){
               //   console.log('转移单量')
               //   callback(new Error(this.$t('public.Withdrawal_amount')));
               // }else{

               // }

             }

           };
      var validatePass3 = (rule, value, callback) => {
        console.log(value , this.ctrlInfo)
           if (!value) {
             callback(new Error(this.$t('public.Enter')));
           } else {
             callback();
             // if(value>this.ctrlInfo.residueBalance){
             //   callback(new Error(this.$t('public.Withdrawal_amount')));
             // }else{

             // }

           }

         };
      var validatePass4 = (rule, value, callback) => {
        console.log(value , this.ctrlInfo.residueOddNumber)
           if (!value) {

             callback(new Error(this.$t('public.Enter')));
           } else {
             callback();
             // if(value>this.ctrlInfo.residueOddNumber){
             //   callback(new Error(this.$t('public.Withdrawal_unit')));
             // }else{

             // }

           }

         };

      return {
        payLoading:false,
        transferLoading:false,
        danLoading:false,
        onclickOBJ:{},//点前点击的用户
        ctrlShow:false,//撤回对话框显示
        ctrlInfo:{
          numbers:'', //撤回单量
          number:'', //撤回金额
          user_account:null,
        },//撤回信息
        number:null,//转移的数量
        user_account:null,//转移用户的用户账号
        transferShow:false,//转移单量对话框
        selectUserList:[],//可以转移的用户列表
        rules:{
          user_account: [
              { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          rechargeAmount:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          rechargeOrderNum:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
        },
        rules2:{
          user_account: [
              { required: true, message: this.$t('public.Enter')+this.$t('Order_module.user_account'), trigger: 'blur' },
          ],
          number:[
              { validator: validatePass, trigger: 'blur' }
          ],
          numbers:[
               { validator: validatePass2, trigger: 'blur' }
          ],
        },
        rules3:{
          user_account: [
              { required: true, message: this.$t('public.Enter')+this.$t('Order_module.user_account'), trigger: 'blur' },
          ],
          number:[
              { validator: validatePass3, trigger: 'blur' }
          ],
          numbers:[
               { validator: validatePass4, trigger: 'blur' }
          ],
        },
        payUserInfo:{},//充值的用户的信息
        transferInfo:{
          numbers:null, //转移单量
          number:null, //转移金额
          user_account:null,
        },//点击的用户信息
        user:store.getters.userInfo,//登录用户的信息
        select:{
          userName:'',
          status:''
        },
        dialogVisible:false, //充值金额对话框
        selectstatus:[ //用户状态
          {label:this.$t('public.Active') , value:1},
          {label:this.$t('public.not_active') , value:0}
        ],
        RechargeList:[//充值类型
          {label:this.$t('public.amount_of_money') , value:1},
          {label:this.$t('Order_module.Order_No') , value:0}
        ],
        total:100,
        limit:10,
        page:1,
        payForm:{
          // 充值提交表单
          remark:'',
          rechargeAmount:null,//充值金额
          rechargeOrderNum:null,//充值单号
          rechargeType:null,//充值类型
          userId:0,//用户id
        },
        tableData:[],
        formInline:{
          time:'',
          user:'',

        }
      }
    },

    created() {
    },
    mounted() {
      this.getList()
    },
    destroyed() {

    },
    methods: {
      formselect(){
        this.page = 1
        this.getList()
      },
      submitdan(formName){
        this.danLoading = true
           this.$refs[formName].validate((valid) => {
                  if (valid) {
                    var data = {
                      customerId:this.ctrlInfo.id, //接受方id
                      rechargeAmount:this.ctrlInfo.number,//充值金额数
                      rechargeOrderNum:this.ctrlInfo.numbers,//充值单号数
                    }
                    user_revoke(data).then(res=>{
                      this.danLoading = false
                      this.$message({
                        type:'success',
                        message:this.$t('public.Operation_successful')
                      })
                      this.getList()
                      this.ctrlShow = !this.ctrlShow
                    }).catch(err=>{
                      this.danLoading = false
                    })
                  } else {
                    this.danLoading = false
                    return false;
                  }
                });
      },
      ctrlc(item){
        // 返回
        this.onclickOBJ = item
        this.ctrlShow = !this.ctrlShow
        this.ctrlInfo.userAccount = item.userAccount // 来源用户账号
        this.ctrlInfo.balance = item.balance // 账户余额
        this.ctrlInfo.residueBalance = item.residueBalance // 可用余额
        this.ctrlInfo.oddNumbers =item.oddNumbers //单号数量
        this.ctrlInfo.residueOddNumbers=item.residueOddNumbers //剩余可用单号
        this.ctrlInfo.numbers=null //撤回的单量
        this.ctrlInfo.number=null //撤回的金额
        this.ctrlInfo.id = item.id//转移用户的用户账号

      },
      ctrlClose(){
        this.ctrlShow = !this.ctrlShow
      },
      transfersubmit(){
        // 提交转移订单
        this.transferLoading = true
         this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            var data = {
              userId:this.onclickOBJ.id, //转移的id
              customerId:this.transferInfo.user_account, //接受方id
              rechargeAmount:this.transferInfo.number?this.transferInfo.number:0,//转移金额
              rechargeOrderNum:this.transferInfo.numbers?this.transferInfo.numbers:0,//转移单量
            }
            user_transfer(data).then(res=>{
              this.$message({
                type:'success',
                message:this.$t('public.Operation_successful')
              })
              this.transferShow = !this.transferShow
              this.getList()
              this.transferLoading = false
            }).catch(err=>{
              this.transferLoading = false
            })

          } else {
            console.log('error submit!!');
            this.transferLoading = false
            return false;
          }
        });

      },
      pay(){
        // 充值金额
        this.payLoading = true
        this.$refs.payForm.validate((valid) => {

          if (valid) {
           this.payForm.rechargeAmount = this.payForm.rechargeAmount
           this.payForm.rechargeOrderNum = this.payForm.rechargeOrderNum
           user_recharge(this.payForm).then(res=>{
             this.$message({
               type:'success',
               message:this.$t('public.Operation_successful')
             })
             this.dialogVisible = !this.dialogVisible
             this.getList()
             this.payForm={
               // 充值提交表单
               remark:'',
               rechargeAmount:null,//充值金额
               rechargeOrderNum:null,//充值单号
               rechargeType:null,//充值类型
               userId:0,//用户id
             }
             this.payLoading = false
           }).catch(()=>{
             this.payLoading = false
           })
          } else {
            this.payLoading = false
            return false;
          }
        })



        console.log(this.payForm)
      },
      getList(){
        // 获取用户列表
        var data = {
          userName:this.select.userName,
          status:this.select.status,
          page:Number(this.page),
          limit:Number(this.limit)
        }
        user_list(data).then(res=>{
          this.total = res.page.totalCount
          this.tableData = res.page.list
        })
      },
      handleSelectionChange(e){
        console.log(e)
      },
      handleSizeChange(e){

      },
      handleCurrentChange(e){

      },
      transferClose(item){
        this.onclickOBJ = item
        if(this.transferShow == true){
          this.transferShow = false
          return
        }
        user_selectUser({customerId:item.id}).then(res=>{
          this.selectUserList = res.list
          this.transferInfo.userAccount = item.userAccount // 来源用户账号
          this.transferInfo.balance = item.balance // 账户余额
          this.transferInfo.residueBalance = item.residueBalance // 可用余额
          this.transferInfo.oddNumbers =item.oddNumbers //单号数量
          this.transferInfo.residueOddNumbers=item.residueOddNumbers //剩余可用单号
          this.transferInfo.numbers=null //转移的单量
          this.transferInfo.number=null //转移的金额
          this.transferInfo.user_account = null //转移用户的用户账号
          this.transferInfo.id = item.id//转移用户的用户账号
          console.log(this.transferInfo)
          this.transferShow = !this.transferShow
        })
      },
      payShow(item){
        this.onclickOBJ = item
        console.log(this.onclickOBJ)
        this.payUserInfo = item
        this.payForm.userId = item.id
        this.payForm.rechargeType = item.rechargeType
        this.payForm.rechargeAmount=item.rechargeType==1?this.payForm.rechargeAmount:null,//充值金额
        this.payForm.rechargeOrderNum=item.rechargeType==0?this.payForm.rechargeOrderNum:null,//充值单号
        this.dialogVisible = !this.dialogVisible
      }
    }
  }
</script>

<style scoped>
  @import url('Electronic_ticket_management.css');
</style>
